/* ----------------------------------------

	* Ideal Forms 1.02
	* Copyright 2011, Cedric Ruiz
	* Free to use under the GPL license.
	* http://www.spacirdesigns.com

-------------------------------------------

	* Play with the following values
	* till you get something you like.
	* Use darker colors than you would
	* because of the gradients.

-----------------------------------------*/
/*	Global variables
----------------------------------------*/

@font: 14px; /* Adjusts overall size */
@font-family: Arial, sans-serif;
@radius: 4px; /* border-radius */
@border-width: 1px;


/* ---------------------------------------
	Colors
----------------------------------------*/

 /* Select */
@select-title: #1ba5c7;
@select-title-font: darken(@select-title, 30%);
@select-title-font-shadow: rgba(255,255,255,.4);
@select-arrow-bg: lighten(@select-title, 20%);
@select-arrow: darken(@select-title, 30%);
@select-menu-bg: #fcfcfc;
@select-menu-font: darken(@select-menu-bg, 75%);
@select-menu-selection: darken(@select-menu-bg, 20%);
@select-menu-selection-font: darken(@select-menu-bg, 75%);

 /* Button */
@button: @select-title;
@button-font: darken(@button, 30%);
@button-font-shadow: rgba(255,255,255,.4);

/* Radio & Check */
@radiocheck-bg: #ccc;
@radiocheck-checked: #d1301b;

/* Text */
@text-bg: #fff;
@text-focus: #1ba5c7;

/* Fieldset */
@fieldset: #fcfcfc;

/* Required star */
@required: #d1301b;

/* ---------------------------------------
	Mixins
----------------------------------------*/

.rounded(
@topleft: @radius,
@topright: @radius,
@bottomright: @radius,
@bottomleft: @radius ) {
	-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
	-moz-border-radius: @topleft @topright @bottomright @bottomleft;
	border-radius: @topleft @topright @bottomright @bottomleft;
}
.gradient (@top, @bottom){
	background: @top;
	background: -moz-linear-gradient(top, @top 0%, @bottom 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@top), color-stop(100%,@bottom));
	background: -webkit-linear-gradient(top, @top 0%, @bottom 100%);
	background: -o-linear-gradient(top, @top 0%, @bottom 100%);
	background: -ms-linear-gradient(top, @top 0%, @bottom 100%);
	background: linear-gradient(top, @top 0%, @bottom 100%);
	filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{top}', endColorstr='@{bottom}',GradientType=0 )";
}
.box-shadow (
	@shadow1,
    @shadow2: transparent 0 0 0 ) {
    -moz-box-shadow: @shadow1, @shadow2;
    -webkit-box-shadow: @shadow1, @shadow2;
	box-shadow: @shadow1, @shadow2;
}
.element {
	line-height: 1;
	border: 0;
	text-decoration: none;
	font-size: @font;
	font-family: @font-family;
}


/* ---------------------------------------
	Load Dingbat font for checkmark icon
----------------------------------------*/
@font-face {
    font-family: 'DistroIIBats';
    src: url('distro2_bats-webfont.eot');
    src: url('distro2_bats-webfont.eot?#iefix') format('embedded-opentype'),
         url('distro2_bats-webfont.woff') format('woff'),
         url('distro2_bats-webfont.ttf') format('truetype'),
         url('distro2_bats-webfont.svg#DistroIIBats') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* ---------------------------------------
	Remove default input focus outline
----------------------------------------*/
:focus { outline:none; outline-style: none; }
::-moz-focus-inner { border:0; }


/* ----------------------------------------

	Ideal Forms Styles

	* Be careful editing these values
	* since everything is measured in ems
	* you should only change values using
	* the global variables and colors above.

-----------------------------------------*/

.idealform {
	font-size: @font;
	font-family: @font-family;
	:focus, :active {
		outline: 0;
	}
	fieldset {
		margin-bottom: 2em;
		padding: 2em;
		background: @fieldset;
		.box-shadow(0 0 @border-width*2 rgba(0,0,0,.2));
		.rounded();
	}
	select,
	input[type="radio"],
	input[type="checkbox"] {
		position: absolute;
		left: -9999px;
	}
	label,
	.idealselect,
	.idealradio,
	.idealcheck {
		display: inline-block;
	}
	div { margin-bottom: 1em; }
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}


/* ---------------------------------------
	Label
----------------------------------------*/

	label {
		vertical-align: top;
		padding-right: 1em;
	}
	.main-label {
		position: relative;
		font-weight: bold;
		span {
			position: absolute;
			left: -.5em;
			top: -.3em;
			font-family: Arial, sans-serif;
			font-size: 1.5em;
			color: @required;
		}
	}
	
/* ---------------------------------------
	Text
----------------------------------------*/
	input[type="text"],
	input[type="password"],
	textarea {
		.element;
		display: inline-block;
		padding: .5em .5em;
		border:  @border-width solid darken(@text-bg, 30%);
		background: @text-bg;
		.box-shadow(inset 0 @border-width rgba(0,0,0,.2));
		.rounded();
		&:focus {
			border: @border-width solid @text-focus;
			.box-shadow(0 0 @border-width*2 @text-focus);
		}
	}


/* ---------------------------------------
	Button
----------------------------------------*/

	input[type="submit"],
	input[type="reset"],
	button {
		.element;
		display: inline-block;
		padding: .5em 1.5em;
		box-shadow: inset 0 @border-width rgba(255,255,255,.7);
		border: @border-width solid darken(@button, 15%);
		font-weight: bold;
		color: @button-font;
		text-shadow: 1px 1px @button-font-shadow;
		.box-shadow(inset 0 @border-width rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.3));
		.rounded();
		.gradient(lighten(@button, 20%), @button);
		&:hover { .gradient(lighten(@button, 30%), @button); }
		&:active { background: @button; }
	}


/* ---------------------------------------
	Select
----------------------------------------*/

	.idealselect {
		a {
			.element;
			display: block;
			padding: .5em .8em;
			padding-right: 3em;
		}
		/* Title */
		.idealselect-title {
			position: relative;
			font-weight: bold;
			color: @select-title-font;
			text-shadow: 1px 1px @select-title-font-shadow;
			border: @border-width solid darken(@select-title, 15%);
			.box-shadow(inset 0 @border-width rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.3));
			.gradient(lighten(@select-title, 20%), @select-title);
			.rounded();
			span {
				position: absolute;
				right: 0;
				top: 0;
				display: inline-block;
				height: 100%;
				width: 2em;
				border-left: @border-width solid darken(@select-arrow-bg, 20%);
				.box-shadow(inset 0 @border-width rgba(255,255,255,.7));
				.gradient(lighten(@select-arrow-bg, 20%), @select-arrow-bg);
				.rounded(0,@radius,@radius,0);
			}
			/* Arrow */
			small {
				position: relative;
				display: inline-block;
				vertical-align: top;
				top: 50%;
				left: 50%;
				margin: -.25em 0 0 -.5em;
				border-width: .5em;
				border-style: solid;
				border-color: @select-arrow transparent transparent transparent;
			}

		}
		/* Menu */
		ul {
			position: absolute;
			overflow-y: scroll;
			z-index: 999;
			border: @border-width solid darken(@select-menu-bg, 40%);
			border-top: 0;
			.gradient(darken(@select-menu-bg, 15%), @select-menu-bg);
			.rounded(0,0,@radius,@radius);
			li:last-child a { .rounded(0,0,@radius,@radius); }
			a {
				color: @select-menu-font;
				&:hover {
					background: @select-menu-selection;
					color: @select-menu-selection-font;
				}
			}
		}
		&:hover .idealselect-title {
			.gradient(lighten(@select-title, 30%), @select-title);
			span { .gradient(lighten(@select-arrow-bg, 30%), @select-arrow-bg); }
		}
		&.open .idealselect-title {
			.rounded(@radius,@radius,0,0);
			span { .rounded(0,@radius,0,0); }
		}
	}


/* ---------------------------------------
	Radio & Check
----------------------------------------*/

	.idealradio, .idealcheck {
		margin-top: .3em;
		label { cursor: pointer; }
		li { margin-bottom: .6em; }
		span {
			display: inline-block;
			vertical-align: top;
			width: 1.2em;
			height: 1.2em;
			margin-right: .5em;
			border: @border-width solid darken(@radiocheck-bg, 20%);
			.gradient(lighten(@radiocheck-bg, 20%), @radiocheck-bg);
		}
		/* Check */
		.check {
			.rounded(@radius/2,@radius/2,@radius/2,@radius/2);
			&.checked {
				background: lighten(@radiocheck-bg, 20%);
				/* Checkmark */
				&:after {
					content: "|";
					font-family: 'DistroIIBats';
					font-size: 1.6em;
					position: relative;
					top: -.3em;
					left: .1em;
					color: @radiocheck-checked;
				}
			}
		}
		/* Radio */
		.radio {
			.rounded(1.2em,1.2em,1.2em,1.2em);
			&.checked {
				.box-shadow(inset 0 0 0 .3em lighten(@radiocheck-bg, 20%));
				filter: 0; /* IE */
				background: @radiocheck-checked;
			}
		}
	}
}